/*******
 * 处理筛选组件的视图渲染
 * @params(dataSource) 筛选组件的配置参数，必选参数
 * @params(onSubmit)  触发筛选的函数，必选参数
 * @params(formItemLayout) 用户自定义label和select框的比例，可选参数
 * @return 整个筛选的视图
 *******/


import React,{ Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Row, Col, Button, Icon } from 'antd';
import handleSelect from './handleSelect';
import handleInput from './handleInput';
const gutterCol = {
    xs: 0,
    sm: 16,
    md: 24,
    lg: 60
};
class Filter extends Component {
    constructor(props){
        super(props);
        this.state = {
            expand: false
        }
    }

    handleSubmit = (e) => {
        const { onSubmit, form } = this.props;
        e.preventDefault();
        form.validateFields((err,values) => {
            if (err) {
                return
            }
            onSubmit(values);
        });
    };

    handleReset = () => {
        const { onSubmit, form } = this.props;
        form.resetFields();
        onSubmit();
    };

    toggle = () => {
        const { expand } = this.state;
        this.setState({ expand: !expand });
    };

    getFields() {
        const { dataSource,total,formItemLayout,showNumber,colNumber,filter} = this.props;
        let colSpan = 24/colNumber;
        const count = this.state.expand ? total : showNumber;
        const children = [];
        for (let i = 0; i < dataSource.length; i++) {
            children.push(
                <Col span={colSpan} key={i} style={{ display: i < count ? 'block' : 'none' }}>
                    { dataSource[i].isSelect ? handleSelect(dataSource[i],this.props.form,formItemLayout,filter) : handleInput(dataSource[i],this.props.form,formItemLayout,filter) }
                </Col>
            );
        }

        if (total%showNumber - colNumber <= 1 && total%showNumber !== 0){
            children.push(
                <Col span={colSpan} key={'button'}>
                    <Button type="primary" onClick={this.handleSubmit}>Search</Button>
                    <Button style={{marginLeft: 8}} onClick={this.handleReset}>Restart</Button>
                </Col>
            )
        }
        return children;
    }

    render() {
        return (
            <Form style={{marginBottom:10}}>
                <Row gutter={gutterCol}>{ this.getFields() }</Row>
                {
                    (this.props.total % this.props.showNumber) === 0 &&
                    <Row>
                        <Col span={24} style={{textAlign: 'center'}}>
                            <Button type="primary" onClick={this.handleSubmit}>Search</Button>
                            <Button style={{marginLeft: 8}} onClick={this.handleReset}>Restart</Button>
                            {
                                (this.props.total > this.props.showNumber) &&
                                <a style={{marginLeft: 8, fontSize: 12}} onClick={this.toggle}>
                                    Collapse
                                    <Icon type={this.state.expand ? 'up' : 'down'}/>
                                </a>
                            }
                        </Col>
                    </Row>
                }
            </Form>
        );
    }
}

Filter.propTypes = {
    onSubmit: PropTypes.func.isRequired,
    dataSource: PropTypes.array.isRequired,
};

export default Form.create()(Filter)

